<template>
  <view class="container">
    <!-- 筛选区域 -->
    <view class="filter-bar">
      <view class="filter-item" @click="showProvinceDrawer">
        <text class="filter-text">{{ selectedProvince || '选择省份' }}</text>
        <uni-icons :size="16" type="bottom" color="#666666" />
      </view>
      <view class="filter-item" @click="toggleSort">
        <text class="filter-text">分数排序</text>
        <uni-icons :size="16" :type="sortDesc ? 'top' : 'bottom'" color="#666666" />
      </view>
    </view>
    <!-- 学校列表 -->
    <scroll-view class="school-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="onRefresh"
      :refresher-enabled="true" :refresher-triggered="isRefreshing">
      <view v-for="(school, index) in filteredSchools" :key="index" class="school-card">
        <view class="school-header">
          <image class="school-logo" :src="school.logo" mode="aspectFill" />
          <view class="school-info">
            <view class="school-title">
              <text class="school-name">{{ school.name }}</text>
              <text class="admission-count">录取人数：{{ school.admissionCount }}</text>
            </view>
            <view class="expand-btn" @click="toggleExpand(index)">
              <text class="expand-text">{{ school.expanded ? '收起' : '展开' }}</text>
              <uni-icons :size="14" :type="school.expanded ? 'top' : 'bottom'" color="#666666" />
            </view>
          </view>
        </view>
        <view class="majors-list" v-if="school.expanded">
          <view v-for="(major, mIndex) in school.majors" :key="mIndex" class="major-item">
            <view class="major-header">
              <text class="major-name">{{ major.name }}</text>
              <text class="major-score">分数线：{{ major.score }}</text>
            </view>
            <view class="major-info">
              <text class="major-count">招生人数：{{ major.count }}</text>
              <view class="tags-container">
                <text v-for="(tag, tIndex) in major.tags" :key="tIndex" class="tag"
                  :class="{ 'tag-primary': tIndex % 2 === 0, 'tag-secondary': tIndex % 2 === 1 }">
                  {{ tag }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 省份选择抽屉 -->
    <uni-popup ref="provinceDrawer" type="bottom">
      <view class="province-drawer">
        <view class="drawer-header">
          <text class="drawer-title">选择省份</text>
          <uni-icons @click="closeProvinceDrawer" type="close" size="20" color="#666666" />
        </view>
        <scroll-view scroll-y class="province-list">
          <view v-for="(province, index) in provinces" :key="index" class="province-item"
            :class="{ 'province-item-active': selectedProvince === province }" @click="selectProvince(province)">
            <text>{{ province }}</text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import mData from "../../data"
const provinceDrawer = ref<any>(null);
const selectedProvince = ref('');
const sortDesc = ref(true);
const isRefreshing = ref(false);
const provinces = [
  '北京', '上海', '广东', '江苏', '浙江', '山东', '四川', '湖北', '湖南', '河南',
  '河北', '福建', '安徽', '江西', '云南', '贵州', '陕西', '山西', '辽宁', '吉林'
];

const currentPage = ref(0);
const pageSize = 10;
const schools = ref<any[]>(mData.schoolList);
const filteredSchools = computed(() => {
  let result = [...schools.value];
  if (selectedProvince.value) {
    result = result.filter(school => school.province === selectedProvince.value);
  }
  result.sort((a, b) => {
    const scoreA = a.majors[0].score;
    const scoreB = b.majors[0].score;
    return sortDesc.value ? scoreB - scoreA : scoreA - scoreB;
  });
  return result;
});
const showProvinceDrawer = () => {
  provinceDrawer.value.open();
};
const closeProvinceDrawer = () => {
  provinceDrawer.value.close();
};
const selectProvince = (province: string) => {
  selectedProvince.value = province;
  closeProvinceDrawer();
};
const toggleSort = () => {
  sortDesc.value = !sortDesc.value;
};
const toggleExpand = (index: number) => {
  schools.value[index].expanded = !schools.value[index].expanded;
};
const loadMore = () => {
  return
};
const onRefresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    currentPage.value = 0;

    isRefreshing.value = false;
  }, 1000);
};
</script>
<style scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  flex-shrink: 0;
}

.filter-item {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.filter-text {
  font-size: 14px;
  color: #333333;
  margin-right: 10rpx;
}

.school-list {
  flex: 1;
  overflow: auto;
}

.school-card {
  margin: 20rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.school-header {
  display: flex;
  align-items: center;
}

.school-logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.school-info {
  flex: 1;
}

.school-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.school-name {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.admission-count {
  font-size: 14px;
  color: #999999;
}

.expand-btn {
  display: flex;
  align-items: center;
}

.expand-text {
  font-size: 14px;
  color: #666666;
  margin-right: 6rpx;
}

.majors-list {
  margin-top: 20rpx;
  border-top: 1px solid #eeeeee;
  padding-top: 20rpx;
}

.major-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.major-item:last-child {
  border-bottom: none;
}

.major-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.major-name {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.major-score {
  font-size: 14px;
  color: #666666;
}

.major-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.major-count {
  font-size: 14px;
  color: #999999;
}

.tags-container {
  display: flex;
  gap: 10rpx;
}

.tag {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 12px;
}

.tag-primary {
  background-color: #e6f3ff;
  color: #1890ff;
}

.tag-secondary {
  background-color: #fff3e6;
  color: #fa8c16;
}

.province-drawer {
  background-color: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #eeeeee;
}

.drawer-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.province-list {
  max-height: 600rpx;
  padding: 20rpx 30rpx;
}

.province-item {
  padding: 24rpx 0;
  font-size: 14px;
  color: #333333;
  border-bottom: 1px solid #f5f5f5;
}

.province-item-active {
  color: #1890ff;
}
</style>
  